import React,{useState,useEffect,memo,useCallback,useMemo} from 'react'
//! useCallback hooks提供的函数，是函数组件内的
//! memo是包函数的，不是函数组件内的
import { Input } from './Input';
import { List } from './List';

//! memo会进行属性props的比较，如果相同，就不re-render
                //! 作为memo函数的实参
const Header=memo(()=>{
    console.log('header re-render');
    return <h1>Todolist</h1>
})

//! 相当于render 只要状态一更新，函数执行一次
const Todolist = ({num}) => {
    // const [su,setSu]=useState(0)
    // useEffect(() => {
    //     let sum=0;
    //     for(let i=0;i<=num;i++){
    //         sum+=i;
    //     }
    //     setSu(sum);
    // }, [])

    const [list,setList]=useState([1,2,3]);

    //! 之前的写法函数重新创建，地址不再一样
                        //! 第一个参数是要缓存的函数
    const addItem=useCallback(
        (e)=>{
            if(e.keyCode==13){
                //! set里面除了放新状态值，还能放回调函数
                //! 回调函数的参数(形参)是原有的状态, 上一次更新的状态，不是初始的状态
                setList((a)=>[e.target.value,...a]);
                // setList([e.target.value,...list]);
            }
        },
        []//! 第二个参数，依赖项，和useEffect一样，空数组只执行一次
    )
    //! useMemo() 缓存一个值 返回第一个回调函数的返回值
    //! return一个函数，就和useCallback作用一样 
    const val=useMemo(()=>{
        console.log("cal is called")
        let sum=0;
        for(let i=0;i<=num;i++){
            sum+=i;
        }
        return sum;
    }, [])

    // const cal=()=>{
    //     console.log("cal is called")
    //     let sum=0;
    //     for(let i=0;i<=num;i++){
    //         sum+=i;
    //     }
    //     return sum;
    // }
    return (
        <div>
            {/* <h1>计算结果：{cal()}</h1> */}
            <h1>计算结果：{val}</h1>
            <Header/>
            <Input addItem={addItem}/>
            <List list={list}/>
        </div>
    )
}

export default Todolist;

